<template>
	<div id="runDetail">
		<div class="breadcrumb">
			<img src="../../../../static/img/outClass_icon_1.png" class="head_img">
			<span class="title" @click="cancel()">跑步管理</span>
			<span>/ 跑步详情</span>
		</div>
		<div class="search">
			<span> 姓名:{{userInfo.name}}</span>
			<span style="margin-left:20px;"> 性别:{{userInfo.gender}}</span>
			<span style="margin-left:20px;"> 学号:{{userInfo.campusId}}</span>
			<span style="margin-left:20px;"> 学校校区:{{userInfo.campusZoneName}}</span>
			<span style="margin-left:20px;"> 院系:{{userInfo.department}}</span>
			<span style="margin-left:20px;">老师：{{userInfo.teacherName}}</span>
			<span style="margin-left:20px;">课程：{{userInfo.className}}</span>
		</div>
		<div class="list">
			<div class="list_head">
				<span>跑步详细信息</span>
				<div class="validate_btn">
					<el-button class="passBtn" type="primary" @click="auditpass()" v-if="verifyStatus == 2 || status != 0">审核通过</el-button>
					<el-button class="noPass" type="primary" @click="auditpassno()" v-if="verifyStatus == 2 || status == 0">审核不通过</el-button>
				</div>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<el-table :data="list1">
				<el-table-column prop="beginAt" label="开始时间">
				</el-table-column>
				<el-table-column prop="stopAt" label="结束时间">
				</el-table-column>
				<el-table-column prop="duration" label="运动时长">
				</el-table-column>
				<el-table-column prop="speed" label="配速">
				</el-table-column>
				<el-table-column prop="avgStepFreq" label="步频">
				</el-table-column>
				<el-table-column prop="length" label="跑步里程">
				</el-table-column>
				<el-table-column prop="validLength" label="有效公里数">
				</el-table-column>
				<el-table-column label="跑步模式">
					<template scope="scope">
						<span v-if="scope.row.runMode ==1">随机终点</span>
						<span v-if="scope.row.runMode ==2">操场跑</span>
						<span v-if="scope.row.runMode ==3">约定终点</span>
						<span v-if="scope.row.runMode ==4">自由跑</span>
					</template>
				</el-table-column>
				<el-table-column label="完成状态">
					<template scope="scope">
						<span v-if="scope.row.completed ==0">未完成</span>
						<span v-if="scope.row.completed ==1">已完成</span>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="成绩状态">
					<template scope="scope">
						<span v-if="scope.row.status ==0">正常</span>
						<span v-if="scope.row.status ==1">异常</span>
						<span v-if="scope.row.status ==2">作弊</span>
					</template>
				</el-table-column>
				<el-table-column label="申诉状态">
					<template scope="scope">
						<span v-if="scope.row.appealStatus ==1">未申诉</span>
						<span v-if="scope.row.appealStatus ==2">已申诉</span>
					</template>
				</el-table-column>
				<el-table-column prop="verifyStatus" label="审核状态">
					<template scope="scope">
						<span v-if="scope.row.verifyStatus ==2">待审核</span>
						<span v-if="scope.row.verifyStatus ==3">审核通过</span>
						<span v-if="scope.row.verifyStatus ==4">审核未通过</span>
					</template>
				</el-table-column>
			</el-table>
			<el-row>
				<el-col :span='9' style="padding-right:10px;">
					<div>
						<span class="infoleftt">设备信息</span>
						<el-table :data="deviceInfo">
							<el-table-column prop="deviceName" label="设备名称">
							</el-table-column>
							<el-table-column prop="osVersion" label="系统及版本">
							</el-table-column>
							<el-table-column prop="appVersion" label="APP版本">
							</el-table-column>
						</el-table>
					</div>
					<div>
						<span class="infoleftt">跑步详情</span>
						<div id="map"></div>
					</div>
				</el-col>

				<el-col :span='15' style="padding-top:130px;">
					<div style="font-size:12px;color:#333;">
						<span class="infoleftt">异常原因</span>
						<div>{{statusInfo}}</div>
					</div>
					<div style="font-size:12px;color:#333;">
						<span class="infoleftt">申诉信息</span>
						<div>申诉时间：{{appealTime}}</div>
						<div>申诉理由：{{appealContent}}</div>
					</div>
					<div>
						<span class="infoleftt">审核记录</span>
						<el-table :data="verifyRecord">
							<el-table-column prop="verifyTime" label="审核时间" width="250">
							</el-table-column>
							<el-table-column prop="appealStatus" label="审核结果" width="150">
								<template scope="scope">
									<span v-if="scope.row.appealStatus ==3">审核通过</span>
									<span v-if="scope.row.appealStatus ==4">审核不通过</span>
								</template>
							</el-table-column>
							<el-table-column prop="verifier" label="审核人">
							</el-table-column>
							<el-table-column prop="verifyInfo" label="审核意见">
							</el-table-column>
						</el-table>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" style="padding-right:10px;">
					<div style="position:relative;">
						<span class="infoleftt">配速信息</span>
						<vue-highcharts :options="options_1" ref="lineCharts_1"></vue-highcharts>
						<div class="nopeisu" v-if="showInfo">该手机由于硬件限制，无法记录配速</div>
					</div>
				</el-col>
				<el-col :span="12" style="padding-left:10px;">
					<div style="position:relative;">
						<span class="infoleftt">步频信息</span>
						<vue-highcharts :options="options_2" ref="lineCharts_2"></vue-highcharts>
						<span class="nobupin" v-if="showInfo_1">该手机由于硬件限制，无法记录步频</span>
					</div>
				</el-col>
			</el-row>
		</div>

		<el-dialog title="请填写审核不通过的原因" :visible.sync="dialogFormVisible">
			<el-form>
				<el-form-item :label-width="formLabelWidth" label="异常原因:">
					<el-select v-model="mainType" @change="changeMainType">
						<el-option value="1" label="成绩异常"></el-option>
						<el-option value="2" label="作弊"></el-option>
					</el-select>
					<el-select v-model="exceptionType">
						<el-option v-if="mainType == '1'" value="1" label="配速异常"></el-option>
						<el-option v-if="mainType == '1'" value="2" label="步频异常"></el-option>
						<el-option v-if="mainType == '1'" value="3" label="未知原因"></el-option>
						<el-option v-if="mainType == '2'" value="101" label="人肉代跑"></el-option>
						<el-option v-if="mainType == '2'" value="102" label="骑车作弊"></el-option>
						<el-option v-if="mainType == '2'" value="103" label="其他作弊"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input type="textarea" v-model="verifyInfo1">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitVerity()">确 定</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				rrid: "",
				uid: "",
				sid: "",
				dialogFormVisible: false,
				formLabelWidth: "85px",
				mainType: "1",
				exceptionType: "1",
				verifyInfo: "",
				verifyInfo1: "",
				runMode: "",
				userInfo: {},
				verifyStatus: "",
				appealStatus: "",
				status: "",
				list1: [],
				statusInfo: "",
				appealTime: "",
				appealContent: "",
				deviceInfo: [],
				verifyRecord: [],
				data_1: [],
				data_2: [],
				result: "",
				fiveresult: "",
				showInfo: false,
				showInfo_1: false,
				options_1: {
					chart: {
						type: "area",
						backgroundColor: "#494e52", //设置背景
						borderRadius: 8 //圆角
					},
					credits: {
						enabled: false
					},
					title: {
						text: "配速曲线详情图",
						align: "left",
						style: {
							color: "#d7d8dc",
							fontSize: "14"
						}
					},
					subtitle: {
						text: "单位:分钟/公里",
						align: "right",
						style: {
							color: "#8d9194"
						}
					},
					yAxis: {
						title: {
							text: ""
						},
						gridLineColor: "#868a8d",
						gridLineWidth: "1",
						gridLineDashStyle: "dash",
						min: 0,
						max: 250,
						tickPositions: [0, 2, 4, 6, 8, 10, 12], //设置纵坐标的标尺
						labels: {
							style: {
								color: "#81868a" //纵坐标刻度文字的颜色
							}
						}
					},
					tooltip: {
						pointFormat: "{point.y}",
						style: {
							display: "none"
						}
					},
					plotOptions: {
						area: {
							pointStart: 0,
							pointInterval: 1,
							marker: {
								enabled: false,
								symbol: "circle",
								radius: 2,
								states: {
									hover: {
										enabled: true
									}
								}
							}
						},
						series: {
							states: {
								click: {
									enabled: false
								}
							}
						}
					},
					series: [],
					legend: {
						enabled: false //让下面的series name 不显示
					}
				},
				options_2: {
					chart: {
						type: "area",
						backgroundColor: "#494e52", //设置背景
						borderRadius: 8 //圆角
					},
					credits: {
						enabled: false
					},
					title: {
						text: "步频曲线详情图",
						align: "left",
						style: {
							color: "#d7d8dc",
							fontSize: "14"
						}
					},
					subtitle: {
						text: "单位:步/分钟",
						align: "right",
						style: {
							color: "#8d9194"
						}
					},
					yAxis: {
						title: {
							text: ""
						},
						gridLineColor: "#868a8d",
						gridLineWidth: "1",
						gridLineDashStyle: "dash",
						min: 0,
						max: 250,
						tickPositions: [0, 50, 100, 150, 200, 250], //设置纵坐标的标尺
						labels: {
							style: {
								color: "#81868a" //纵坐标刻度文字的颜色
							}
						}
					},
					tooltip: {
						formatter: function () {
							return this.y;
						},
						style: {
							display: ""
						}
					},
					plotOptions: {
						area: {
							pointStart: 0,
							pointInterval: 1,
							marker: {
								enabled: false,
								symbol: "circle",
								radius: 2,
								states: {
									hover: {
										enabled: true
									}
								}
							}
						},
						series: {
							states: {
								click: {
									enabled: false
								}
							}
						}
					},
					series: [],
					legend: {
						enabled: false //让下面的series name 不显示
					}
				}
			};
		},
		mounted() {
			this.rrid = this.$util.getStore("rrid");
			this.uid = this.$util.getStore("uid");
			this.sid = this.$util.getUrlParam("sid");
			this.getUserInfo();
			this.getRecordDetail();
			this.getSpeedDiagram();
			this.getStepDiagram();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//用户信息；
			getUserInfo() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/studentinfo";
				this.$http({
					url,
					method: "GET",
					params: {
						uid: this.uid,
						sid: this.sid
					}
				}).then(response => {
					if (response.data.error == 10000) {
						if (response.data.data.gender == 0) {
							response.data.data.gender = "女";
						} else {
							response.data.data.gender = "男";
						}
						this.userInfo = response.data.data;
					}
				});
			},
			changeMainType() {
				this.exceptionType = this.mainType == "1" ? "1" : "101";
			},
			//记录信息
			getRecordDetail() {
				this.list1 = [];
				this.deviceInfo = [];
				this.verifyRecord = [];
				let url = this.$util.domain + "/student/runnings/recordDetail";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						id: parseInt(this.rrid)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let dataObj = response.data.data,
							$beginAt = dataObj.beginAt,
							$stopAt = dataObj.stopAt,
							$length = dataObj.length,
							$speed = dataObj.speed,
							$avgStepFreq = dataObj.avgStepFreq,
							$duration = dataObj.duration,
							$validLength = dataObj.validLength,
							$runMode = dataObj.runMode,
							$completed = dataObj.completed,
							$appealStatus = dataObj.appealStatus,
							$status = dataObj.status,
							$verifyStatus = dataObj.verifyStatus,
							$appVersion = dataObj.appVersion,
							$deviceName = dataObj.deviceName,
							$statusInfo = dataObj.statusInfo,
							$appealTime = dataObj.appealTime,
							$appealContent = dataObj.appealContent,
							$verifyRecord = dataObj.verifyRecord,
							$result = dataObj.pointData,
							$fiveresult = dataObj.fixedPoints,
							$osVersion = dataObj.osVersion;

						let speed = $speed;
						let int = parseInt(speed);
						let float = speed - int;
						$speed = int + "'" + parseInt(float * 60) + '"';
						$beginAt = new Date($beginAt).format("yyyy/MM/dd hh:mm:ss");
						$stopAt = new Date($stopAt).format("yyyy/MM/dd hh:mm:ss");
						$duration = Math.ceil($duration / 60) + "min"; //转换分钟
						$length = ($length / 1000).toFixed(2) + "公里"; //转换公里
						$validLength = ($validLength / 1000).toFixed(2) + "公里"; //转换公里
						$avgStepFreq = $avgStepFreq + "步/分钟"; //转换步频
						if ($status != 0) {
							this.statusInfo = $statusInfo;
						}
						this.verifyStatus = $verifyStatus;
						this.appealStatus = $appealStatus;
						this.status = $status;
						this.runMode = $runMode;
						this.result = $result;
						this.fiveresult = $fiveresult;
						if ($appealTime) {
							this.appealTime = new Date($appealTime).format(
								"yyyy/MM/dd hh:mm:ss"
							);
						}
						this.appealContent = $appealContent;

						this.list1.push({
							speed: $speed,
							stopAt: $stopAt,
							length: $length,
							status: $status,
							runMode: $runMode,
							beginAt: $beginAt,
							duration: $duration,
							completed: $completed,
							validLength: $validLength,
							avgStepFreq: $avgStepFreq,
							verifyStatus: $verifyStatus,
							appealStatus: $appealStatus
						});
						this.deviceInfo.push({
							osVersion: $osVersion,
							appVersion: $appVersion,
							deviceName: $deviceName
						});
						if ($verifyRecord && $verifyRecord.length > 0) {
							for (let i = 0; i < $verifyRecord.length; i++) {
								this.verifyRecord.push({
									verifier: $verifyRecord[i].verifier,
									verifyInfo: $verifyRecord[i].verifyInfo,
									appealStatus: $verifyRecord[i].appealStatus,
									verifyTime: new Date($verifyRecord[i].verifyTime).format("yyyy/MM/dd hh:mm:ss")
								});
							}
						}

						this.drawMap();
					}
				});
			},
			//返回
			cancel() {
				location.href = location.href.replace("runDetail", "runManage");
			},
			//审核通过
			auditpass() {
				this.$confirm("确定审核通过？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					let url = this.$util.domain + "/student/runnings/updateVerifyStatus";

					this.$http({
						url,
						method: "POST",
						body: JSON.stringify({
							verifyInfo: "",
							appealStatus: 3,
							rrids: [parseInt(this.rrid)]
						})
					}).then(response => {
						if (response.data.error == 10000) {
							this.$util.successMsg("审核成功");
							this.getRecordDetail();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => { });
			},
			//审核不通过
			auditpassno() {
				this.mainType = '1';
				if (this.runMode == 4) {
					this.exceptionType = "3";
				} else {
					this.exceptionType = "1";
				}
				this.dialogFormVisible = true;
				this.verifyInfo1 = "";
			},
			// 提交审核结果；
			submitVerity() {
				if (this.verifyInfo1.trim().length > 50) {
					this.dialogFormVisible = false;
					this.$util.errorMsg("审核理由字符太长了");
					return;
				}
				let url = this.$util.domain + "/student/runnings/updateVerifyStatus";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						rrids: [parseInt(this.rrid)],
						appealStatus: 4,
						verifyInfo: this.verifyInfo1,
						exceptionType: parseInt(this.exceptionType)
					})
				}).then(response => {
					this.dialogFormVisible = false;
					if (response.data.error == 10000) {
						this.$util.successMsg("审核成功");
						this.getRecordDetail();
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//获取配速曲线数据
			getSpeedDiagram() {
				let url = this.$util.domain + "/student/runnings/speedDiagram";

				this.$http({
					method: "POST",
					url: url,
					body: JSON.stringify({
						rrid: parseInt(this.rrid)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let peisuData = response.data.data.speedPerTenSec;
						let lineCharts = this.$refs.lineCharts_1;
						this.showInfo = false;
						if (peisuData.length == 0) {
							let peisuavgDiff = [];
							for (let i = 0; i <= 30; i++) {
								peisuavgDiff.push("0");
							}
							let tickInterval = 1;
							let step = 6;
							//画图
							lineCharts.getChart().xAxis[0].update({
								allowDecimals: false,
								tickInterval: tickInterval, //小刻度，根据跑步时长来取值，5分钟以内是1,10分钟以内2
								tickLength: 5,
								labels: {
									step: step, //2分钟之内需要显示12个点，除以2
									formatter: function () {
										return this.value / step; //this.value是2分钟内需要12个点,X轴需要显示2
									},
									style: {
										color: "#81868a"
									}
								},
								lineColor: "#81868a" //基线颜色
							});
							this.showInfo = true;
							lineCharts.addSeries({
								events: {
									click: function (e) {
										e.preventDefault();
									}
								},
								name: "",
								data: peisuavgDiff,
								lineColor: "#0cb88a", //设置线的颜色
								fillColor: "#5f6467"
							});
						} else {
							let peisuavgDiff = [0]; //配速的avgDiff必须是一个数字
							let peisulength = peisuData.length;
							let totalTime = response.data.data.totalTime / 60;
							let tickInterval;
							let step;
							if (totalTime > 0 && totalTime <= 5) {
								tickInterval = 1;
								step = 6;
								for (let i = 0; i < peisuData.length; i++) {
									peisuavgDiff.push(peisuData[i].distance);
								}
								//小于5的时候，步频最长长度是30，小于30个的时候需要补齐数据
								if (peisulength <= 30) {
									for (let i = 0; i < 30 - peisulength; i++) {
										peisuavgDiff.push("0"); //不足60个点，补0凑齐60个点
									}
								}
								if (peisulength > 30) {
									peisuavgDiff = peisuavgDiff.slice(0, 31); //超出30个点，只取30个点
								}
							}
							if (totalTime <= 10 && totalTime > 5) {
								tickInterval = 2;
								step = 6;
								for (let i = 0; i < peisuData.length; i++) {
									peisuavgDiff.push(peisuData[i].distance);
								}
								if (peisulength <= 60) {
									for (let i = 0; i < 60 - peisulength; i++) {
										peisuavgDiff.push("0"); //超出30个点，只取30个点
									}
								}
								if (peisulength > 61) {
									peisuavgDiff = peisuavgDiff.slice(0, 61); //超出60个点，只取60个点
								}
							}
							if (totalTime > 10 && totalTime <= 25) {
								tickInterval = 5;
								step = 6;
								for (let i = 0; i < peisuData.length; i++) {
									peisuavgDiff.push(peisuData[i].distance);
								}
								if (peisulength <= 150) {
									for (let i = 0; i < 150 - peisulength; i++) {
										peisuavgDiff.push("0");
									}
								} else if (peisulength > 150) {
									peisuavgDiff = peisuavgDiff.slice(0, 151); //这里一定要重新赋值
								}
							}
							if (totalTime > 25 && totalTime <= 50) {
								tickInterval = 10;
								step = 6;
								for (let i = 0; i < peisuData.length; i++) {
									peisuavgDiff.push(peisuData[i].distance);
								}
								if (peisulength <= 300) {
									for (let i = 0; i < 300 - peisulength; i++) {
										peisuavgDiff.push("0"); //10为刻度的时候，需要的是300个点
									}
								}
								if (peisulength > 300) {
									peisuavgDiff = peisuavgDiff.slice(0, 301);
								}
							}
							if (totalTime <= 100 && totalTime > 50) {
								tickInterval = 20;
								step = 1;
								for (let i = 0; i < peisuData.length; i++) {
									peisuavgDiff.push(peisuData[i].distance);
								}
								if (peisulength <= 600) {
									for (let i = 0; i < 600 - peisulength; i++) {
										peisuavgDiff.push("0"); //20为刻度时候，其实总共有600个点，不足的先补齐，然后从600个点里面取300个再进行赋值到peisuDiff里面
									}
								}
								if (peisulength > 600) {
									peisuavgDiff = peisuavgDiff.slice(0, 601);
								}
								let peisuavgDiff1 = [];
								for (let i = 0; i <= peisuavgDiff.length; i++) {
									if (i % 6 == 0) {
										peisuavgDiff1.push(peisuavgDiff[i]); //每隔2个数取一个数,组成一个新数组
									}
								}
								peisuavgDiff = peisuavgDiff1; //peisuavgDiff1赋值给peisuavgDiff
							}
							if (totalTime > 100 && totalTime <= 250) {
								tickInterval = 50;
								step = 1;
								for (let i = 0; i < peisuData.length; i++) {
									peisuavgDiff.push(peisuData[i].distance);
								}
								if (peisulength <= 1500) {
									for (let i = 0; i < 1500 - peisulength; i++) {
										peisuavgDiff.push("0"); //50为刻度时候，其实总共有1500个点，不足的先补齐，然后从1500个点里面取300个再进行赋值到peisuDiff里面
									}
								}
								if (peisulength > 1500) {
									peisuavgDiff = peisuavgDiff.slice(0, 1501);
								}
								let peisuavgDiff1 = [];
								for (let i = 0; i <= peisuavgDiff.length; i++) {
									if (i % 6 == 0) {
										peisuavgDiff1.push(peisuavgDiff[i]); //每隔5个数取一个数,组成一个新数组
									}
								}
								peisuavgDiff = peisuavgDiff1; //peisuavgDiff1赋值给peisuavgDiff
							}
							if (totalTime > 250) {
								tickInterval = 50;
								step = 1;
								for (let i = 0; i < peisuData.length; i++) {
									peisuavgDiff.push(peisuData[i].distance);
								}
								if (peisulength <= 1500) {
									for (let i = 0; i < 1500 - peisulength; i++) {
										peisuavgDiff.push("0"); //50为刻度时候，其实总共有1500个点，不足的先补齐，然后从1500个点里面取300个再进行赋值到peisuDiff里面
									}
								}
								if (peisulength > 1500) {
									peisuavgDiff = peisuavgDiff.slice(0, 1501);
								}
								let peisuavgDiff1 = [];
								for (let i = 0; i <= peisuavgDiff.length; i++) {
									if (i % 6 == 0) {
										peisuavgDiff1.push(peisuavgDiff[i]); //每隔5个数取一个数,组成一个新数组
									}
								}
								peisuavgDiff = peisuavgDiff1; //peisuavgDiff1赋值给peisuavgDiff
							}
							//配速换算
							for (let i = 0; i < peisuavgDiff.length; i++) {
								if (peisuavgDiff[i] == 0) {
									peisuavgDiff[i] = 0;
								} else {
									//                        peisuavgDiff[i]=(1/6)/(peisuavgDiff[i]/1000);//两种算法都可以实现相同的结果
									if (1 / 6 * (1000 / peisuavgDiff[i]) > 12) {
										peisuavgDiff[i] = 12; //两种算法都可以实现相同的结果
									} else {
										peisuavgDiff[i] = 1 / 6 * (1000 / peisuavgDiff[i]); //两种算法都可以实现相同的结果
									}
								}
							}

							//画图
							lineCharts.getChart().xAxis[0].update({
								allowDecimals: false,
								tickInterval: tickInterval, //小刻度，根据跑步时长来取值，5分钟以内是1,10分钟以内2
								tickLength: 5,
								labels: {
									step: step, //2分钟之内需要显示12个点，除以2
									formatter: function () {
										return this.value / step; //this.value是2分钟内需要12个点,X轴需要显示2
									},
									style: {
										color: "#81868a"
									}
								},
								lineColor: "#81868a" //基线颜色
							});
							lineCharts.addSeries({
								events: {
									click: function (e) {
										e.preventDefault();
									}
								},
								name: "",
								data: peisuavgDiff,
								lineColor: "#0cb88a", //设置线的颜色
								fillColor: "#5f6467"
							});
						}
					}
				});
			},
			// 获取步频曲线数据；
			getStepDiagram() {
				let url = this.$util.domain + "/student/runnings/stepDiagram";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						rrid: parseInt(this.rrid)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let bupinData = response.data.data.stepsPerTenSec;
						let lineCharts = this.$refs.lineCharts_2;
						this.showInfo_1 = false;
						if (bupinData.length == 0) {
							let bupinavgDiff = [];
							for (let i = 0; i <= 30; i++) {
								bupinavgDiff.push("0");
							}
							let tickInterval = 1;
							let step = 6;

							lineCharts.getChart().xAxis[0].update({
								allowDecimals: false,
								tickInterval: tickInterval, //小刻度，根据跑步时长来取值，5分钟以内是1,10分钟以内2
								tickLength: 5,
								labels: {
									step: step, //2分钟之内需要显示12个点，除以2
									formatter: function () {
										return this.value / step; //this.value是2分钟内需要12个点,X轴需要显示2
									},
									style: {
										color: "#81868a"
									}
								},
								lineColor: "#81868a" //基线颜色
							});
							lineCharts.addSeries({
								events: {
									click: function (e) {
										e.preventDefault();
									}
								},
								name: "",
								data: bupinavgDiff,
								lineColor: "#0cb88a", //设置线的颜色
								fillColor: "#5f6467"
							});
							this.showInfo_1 = true;
						} else if (bupinData.length > 0) {
							let bupinavgDiff = [0];
							let bupinlength = bupinData.length;
							let totalTime = response.data.data.totalTime / 60; //总时长通过后台获取
							let tickInterval;
							let step;
							if (totalTime > 0 && totalTime <= 5) {
								tickInterval = 1;
								step = 6;
								for (let i = 0; i < bupinData.length; i++) {
									bupinavgDiff.push(bupinData[i].stepsNum);
								}
								//小于5的时候，步频最长长度是30，小于30个的时候需要补齐数据
								if (bupinlength <= 30) {
									for (let i = 0; i < 30 - bupinlength; i++) {
										bupinavgDiff.push("0"); //不足60个点，补0凑齐60个点
									}
								}
								if (bupinlength > 30) {
									bupinavgDiff = bupinavgDiff.slice(0, 31); //超出30个点，只取30个点
								}
							}
							if (totalTime <= 10 && totalTime > 5) {
								tickInterval = 2;
								step = 6;
								for (let i = 0; i < bupinData.length; i++) {
									bupinavgDiff.push(bupinData[i].stepsNum);
								}
								if (bupinlength <= 60) {
									for (let i = 0; i < 60 - bupinlength; i++) {
										bupinavgDiff.push("0"); //超出30个点，只取30个点
									}
								}
								if (bupinlength > 61) {
									bupinavgDiff = bupinavgDiff.slice(0, 61); //超出60个点，只取60个点
								}
							}
							if (totalTime > 10 && totalTime <= 25) {
								tickInterval = 5;
								step = 6;
								for (let i = 0; i < bupinData.length; i++) {
									bupinavgDiff.push(bupinData[i].stepsNum);
								}
								if (bupinlength <= 150) {
									for (let i = 0; i < 150 - bupinlength; i++) {
										bupinavgDiff.push("0");
									}
								} else if (bupinlength > 150) {
									bupinavgDiff = bupinavgDiff.slice(0, 151); //这里一定要重新赋值
								}
							}
							if (totalTime > 25 && totalTime <= 50) {
								tickInterval = 10;
								step = 6;
								for (let i = 0; i < bupinData.length; i++) {
									bupinavgDiff.push(bupinData[i].stepsNum);
								}
								if (bupinlength <= 300) {
									for (let i = 0; i < 300 - bupinlength; i++) {
										bupinavgDiff.push("0"); //10为刻度的时候，需要的是300个点
									}
								}
								if (bupinlength > 300) {
									bupinavgDiff = bupinavgDiff.slice(0, 301);
								}
							}
							if (totalTime <= 100 && totalTime > 50) {
								tickInterval = 20;
								step = 1;
								for (let i = 0; i < bupinData.length; i++) {
									bupinavgDiff.push(bupinData[i].stepsNum);
								}
								if (bupinlength <= 600) {
									for (let i = 0; i < 600 - bupinlength; i++) {
										bupinavgDiff.push("0"); //20为刻度时候，其实总共有600个点，不足的先补齐，然后从600个点里面取300个再进行赋值到bupinDiff里面
									}
								}
								if (bupinlength > 600) {
									bupinavgDiff = bupinavgDiff.slice(0, 601);
								}
								let bupinavgDiff1 = [];
								for (let i = 0; i <= bupinavgDiff.length; i++) {
									if (i % 6 == 0) {
										bupinavgDiff1.push(bupinavgDiff[i]); //每隔2个数取一个数,组成一个新数组
									}
								}
								bupinavgDiff = bupinavgDiff1; //bupinavgDiff1赋值给bupinavgDiff
							}
							if (totalTime > 100 && totalTime <= 250) {
								tickInterval = 50;
								step = 1;
								for (let i = 0; i < bupinData.length; i++) {
									bupinavgDiff.push(bupinData[i].stepsNum);
								}
								if (bupinlength <= 1500) {
									for (let i = 0; i < 1500 - bupinlength; i++) {
										bupinavgDiff.push("0"); //50为刻度时候，其实总共有1500个点，不足的先补齐，然后从1500个点里面取300个再进行赋值到bupinDiff里面
									}
								}
								if (bupinlength > 1500) {
									bupinavgDiff = bupinavgDiff.slice(0, 1501);
								}
								let bupinavgDiff1 = [];
								for (let i = 0; i <= bupinavgDiff.length; i++) {
									if (i % 6 == 0) {
										bupinavgDiff1.push(bupinavgDiff[i]); //每隔5个数取一个数,组成一个新数组
									}
								}
								bupinavgDiff = bupinavgDiff1; //bupinavgDiff1赋值给bupinavgDiff
							}
							if (totalTime > 250) {
								tickInterval = 50;
								step = 1;
								for (let i = 0; i < bupinData.length; i++) {
									bupinavgDiff.push(bupinData[i].stepsNum);
								}
								if (bupinlength <= 1500) {
									for (let i = 0; i < 1500 - bupinlength; i++) {
										bupinavgDiff.push("0"); //50为刻度时候，其实总共有1500个点，不足的先补齐，然后从1500个点里面取300个再进行赋值到bupinDiff里面
									}
								}
								if (bupinlength > 1500) {
									bupinavgDiff = bupinavgDiff.slice(0, 1501);
								}
								let bupinavgDiff1 = [];
								for (let i = 0; i <= bupinavgDiff.length; i++) {
									if (i % 6 == 0) {
										bupinavgDiff1.push(bupinavgDiff[i]); //每隔5个数取一个数,组成一个新数组
									}
								}
								bupinavgDiff = bupinavgDiff1; //bupinavgDiff1赋值给bupinavgDiff
							}
							//转换步频
							for (let i = 0; i < bupinavgDiff.length; i++) {
								bupinavgDiff[i] = bupinavgDiff[i] * 6;
							}
							// 画图
							lineCharts.getChart().xAxis[0].update({
								allowDecimals: false,
								tickInterval: tickInterval, //小刻度，根据跑步时长来取值，5分钟以内是1,10分钟以内2
								tickLength: 5,
								labels: {
									step: step, //2分钟之内需要显示12个点，除以2
									formatter: function () {
										return this.value / step; //this.value是2分钟内需要12个点,X轴需要显示2
									},
									style: {
										color: "#81868a"
									}
								},
								lineColor: "#81868a" //基线颜色
							});
							lineCharts.addSeries({
								events: {
									click: function (e) {
										e.preventDefault();
									}
								},
								name: "",
								data: bupinavgDiff,
								lineColor: "#0cb88a", //设置线的颜色
								fillColor: "#5f6467"
							});
						}
					}
				});
			},
			// 使用百度地图画图
			drawMap() {
				//地图开始
				let map = new BMap.Map("map");
				map.addControl(new BMap.NavigationControl());

				//画红色实线
				function drawRedSolidLine(a, b) {
					let polyline = new BMap.Polyline(
						[new BMap.Point(a.lng, a.lat), new BMap.Point(b.lng, b.lat)],
						{ strokeColor: "red", strokeWeight: 2, strokeStyle: "solid" }
					);

					map.addOverlay(polyline);
				}

				//画红色虚线
				function drawRedDashedLine(a, b) {
					let polyline = new BMap.Polyline(
						[new BMap.Point(a.lng, a.lat), new BMap.Point(b.lng, b.lat)],
						{ strokeColor: "red", strokeWeight: 2, strokeStyle: "dashed" }
					);

					map.addOverlay(polyline);
				}

				//画绿色实线
				function drawGreenSolidLine(a, b) {
					let polyline = new BMap.Polyline(
						[new BMap.Point(a.lng, a.lat), new BMap.Point(b.lng, b.lat)],
						{ strokeColor: "green", strokeWeight: 2, strokeStyle: "solid" }
					);
					map.addOverlay(polyline);
				}
				if (!this.result) return false;
				let result = JSON.parse(this.result);
				let allpoints = result.allLocJson || null;
				if (!allpoints) return false;
				let points = JSON.parse(allpoints); //将字符串转换成对象
				let pointsArray = JSON.parse(allpoints);
				let fiveresult, five, fivePoints;
				if (this.fiveresult) {
					//五个点位信息
					fiveresult = JSON.parse(this.fiveresult);
					five = fiveresult;
					fivePoints = JSON.parse(five.fivePointJson); //数组变成
				}

				let newArr = [];
				for (let i = 0; i < pointsArray.length; i++) {
					if (pointsArray[i].type !== -1) {
						newArr.push(pointsArray[i]);
					}
				}

				for (let i = 1; i < newArr.length; i++) {
					//判断是否暂停，暂停画红实线
					if (newArr[i].type === 3 || newArr[i].type === 4) {
						drawRedSolidLine(newArr[i], newArr[i - 1]);
					} else {
						//配速判断,配速异常画红虚线
						if (
							(parseFloat(newArr[i ].speed) < 2.11 && newArr[i].type != 1) ||
							(parseFloat(newArr[i].speed) == 0 && newArr[i].type == 7)
						) {
							drawRedDashedLine(newArr[i], newArr[i - 1]);
						} else {
							drawGreenSolidLine(newArr[i], newArr[i - 1]);
						}
					}
				}

				//添加5个点位覆盖物
				if (fiveresult && fivePoints.length) {
					if (
						fivePoints[0].hasOwnProperty("position") &&
						fivePoints[0].position < 5 &&
						fivePoints[0].position >= 0
					) {
						fivePoints = fivePoints.sort(this.$util.sortby("position"));
						//顺序跑
						fivePoints = fivePoints.filter(item => {
							return item.position < 999;
						});
						for (let i = 0; i < fivePoints.length; i++) {
							//1是必经点位，其它的是普通点位
							if (fivePoints[i].isFixed == 1 || fivePoints[i].isFixed == 2) {
								if (fivePoints[i].isPass == true) {
									let ptmust = new BMap.Point(
										fivePoints[i].lon,
										fivePoints[i].lat
									);
									let mustIcon = new BMap.Icon(
										"../../../../static/img/map/appiontP@2x.png",
										new BMap.Size(22, 38)
									);
									let pointmust = new BMap.Marker(ptmust, { icon: mustIcon }); // 创建标注
									map.addOverlay(pointmust);
								} else {
									let ptmust = new BMap.Point(
										fivePoints[i].lon,
										fivePoints[i].lat
									);
									let mustIcon = new BMap.Icon(
										"../../../../static/img/map/appiont@2x.png",
										new BMap.Size(22, 38)
									);
									let pointmust = new BMap.Marker(ptmust, { icon: mustIcon }); // 创建标注
									map.addOverlay(pointmust);
								}
							} else {
								if (fivePoints[i].isPass == true) {
									let ptnomust = new BMap.Point(
										fivePoints[i].lon,
										fivePoints[i].lat
									);
									let mustnoIcon = new BMap.Icon(
										"../../../../static/img/map/ordinaryPass@2x.png",
										new BMap.Size(22, 38)
									);
									let pointnomust = new BMap.Marker(ptnomust, {
										icon: mustnoIcon
									}); // 创建标注
									map.addOverlay(pointnomust);
								} else {
									let ptnomust = new BMap.Point(
										fivePoints[i].lon,
										fivePoints[i].lat
									);
									let mustnoIcon = new BMap.Icon(
										"../../../../static/img/map/ordinary@3x.png",
										new BMap.Size(22, 38)
									);
									let pointnomust = new BMap.Marker(ptnomust, {
										icon: mustnoIcon
									}); // 创建标注
									map.addOverlay(pointnomust);
								}
							}
						}
					} else {
						//非顺序跑
						for (let i = 0; i < fivePoints.length; i++) {
							//1是必经点位，其它的是普通点位
							if (fivePoints[i].isFixed == 1 || fivePoints[i].isFixed == 2) {
								if (fivePoints[i].isPass == true) {
									let ptmust = new BMap.Point(
										fivePoints[i].lon,
										fivePoints[i].lat
									);
									let mustIcon = new BMap.Icon(
										"../../../../static/img/map/appiontP@2x.png",
										new BMap.Size(22, 38)
									);
									let pointmust = new BMap.Marker(ptmust, { icon: mustIcon }); // 创建标注
									map.addOverlay(pointmust);
								} else {
									let ptmust = new BMap.Point(
										fivePoints[i].lon,
										fivePoints[i].lat
									);
									let mustIcon = new BMap.Icon(
										"../../../../static/img/map/appiont@2x.png",
										new BMap.Size(22, 38)
									);
									let pointmust = new BMap.Marker(ptmust, { icon: mustIcon }); // 创建标注
									map.addOverlay(pointmust);
								}
							} else {
								if (fivePoints[i].isPass == true) {
									let ptnomust = new BMap.Point(
										fivePoints[i].lon,
										fivePoints[i].lat
									);
									let mustnoIcon = new BMap.Icon(
										"../../../../static/img/map/ordinaryPass@2x.png",
										new BMap.Size(22, 38)
									);
									let pointnomust = new BMap.Marker(ptnomust, {
										icon: mustnoIcon
									}); // 创建标注
									map.addOverlay(pointnomust);
								} else {
									let ptnomust = new BMap.Point(
										fivePoints[i].lon,
										fivePoints[i].lat
									);
									let mustnoIcon = new BMap.Icon(
										"../../../../static/img/map/ordinary@3x.png",
										new BMap.Size(22, 38)
									);
									let pointnomust = new BMap.Marker(ptnomust, {
										icon: mustnoIcon
									}); // 创建标注
									map.addOverlay(pointnomust);
								}
							}
						}
					}
				}

				//最小值
				Array.prototype.min = function () {
					let min = this[0];
					let len = this.length;
					for (let i = 1; i < len; i++) {
						if (this[i] < min) {
							min = this[i];
						}
					}
					return min;
				};
				//最大值
				Array.prototype.max = function () {
					let max = this[0];
					let len = this.length;
					for (let i = 1; i < len; i++) {
						if (this[i] > max) {
							max = this[i];
						}
					}
					return max;
				};

				//居中办法,如果存在跑步轨迹,那么最大经度减去最小经度除以2，最大纬度减去最小纬度除以2，就是中心点的经纬度
				//如果不存在跑步轨迹，那么就根据5个点位来自动居中
				let lat1 = []; //纬度数组
				let lng1 = []; //经度数组
				let totalDis1 = []; //距离
				let standardDis = [
					50,
					100,
					200,
					500,
					1000,
					2000,
					5000,
					10000,
					20000,
					25000,
					50000,
					100000,
					200000,
					500000,
					1000000,
					2000000
				];
				//获取缩放等级
				//如果跑步轨迹数据大于2条，那么久用跑步轨迹来定位中心点，否则根据5个固定点位定位中心点
				if (points.length > 1) {
					for (let i = 0; i < points.length; i++) {
						lat1.push(points[i].lat);

						lng1.push(points[i].lng);
						totalDis1.push(points[i].totalDis);
						//type=5是起始点，type=6是终点
						if (points[i].type == 5) {
							let pt = new BMap.Point(points[i].lng, points[i].lat);
							let startIcon = new BMap.Icon(
								"../../../../static/img/map/start.png",
								new BMap.Size(22, 38)
							);
							let pointstart = new BMap.Marker(pt, { icon: startIcon }); // 创建标注
							map.addOverlay(pointstart);
						}
						if (points[i].type == 6) {
							let pt = new BMap.Point(points[i].lng, points[i].lat);
							let startIcon = new BMap.Icon(
								"../../../../static/img/map/end.png",
								new BMap.Size(22, 38)
							);
							let pointstart = new BMap.Marker(pt, { icon: startIcon }); // 创建标注
							map.addOverlay(pointstart);
						}
					}
					let maxlat1 = lat1.max();
					let minlat1 = lat1.min();
					let maxlng1 = lng1.max();
					let minlng1 = lng1.min();
					let maxTotalDis = totalDis1.max(); //最大的点距离
					let minTotalDis = totalDis1.min(); //最小的点距离
					let centerlat = (Number(maxlat1) + Number(minlat1)) / 2;
					let centerlng = (Number(maxlng1) + Number(minlng1)) / 2;
					let dis = Number(maxTotalDis) - Number(minTotalDis);

					function zoom() {
						for (let i = 0; i < standardDis.length; i++) {
							if (standardDis[i] - dis > 0) {
								return 18 - i + 3;
							} else {
								return 17;
							}
						}
					}
					map.centerAndZoom(new BMap.Point(centerlng, centerlat), zoom());
				} else if (points.length <= 1) {
					let point1 = [];
					for (let i = 0; i < fivePoints.length; i++) {
						let pt = new BMap.Point(fivePoints[i].lon, fivePoints[i].lat);
						point1.push(pt);
					}
					map.setViewport(point1);
				}
			}
		}
	};
</script>

<style scoped>
	#runDetail {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	#runDetail .list {
		padding-bottom: 80px;
	}

	.title {
		color: #0398ff;
	}

	.search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 40px;
		line-height: 40px;
		padding: 0 25px;
		overflow: hidden;
		font-size: 13px;
		color: #666666;
	}

	#runDetail .btnBox {
		float: right;
	}

	.passBtn {
		margin-right: 15px;
		margin-left: 0;
		float: right;
	}

	.publish {
		position: absolute;
		right: 220px;
		background: #00c18b;
		border-radius: 0;
	}

	.validate_btn {
		display: inline-block;
		position: absolute;
		right: 60px;
	}

	.noPass {
		margin-right: 15px;
		margin-left: 0;
		float: right;
	}

	.time {
		display: inline-block;
		width: 15%;
		min-width: 150px;
	}

	.qizhiDate {
		display: inline-block;
		width: 100%;
	}

	.infoleftt {
		border: 1px solid #e3e3e3;
		padding: 0px 10px;
		line-height: 30px;
		margin-top: 15px;
		display: inline-block;
		font-size: 12px;
		color: #333333;
		margin-bottom: 5px;
	}

	.list_head {
		font-size: 16px;
		color: #222222;
	}

	#map {
		height: 300px;
		width: 100%;
		background: #e5e5e5;
	}

	.nobupin {
		z-index: "10000";
		opacity: "1";
		position: absolute;
		color: #a0a0a0;
		top: 50%;
		left: 20%;
	}

	.nopeisu {
		z-index: "10000";
		opacity: "1";
		position: absolute;
		color: #a0a0a0;
		top: 50%;
		left: 20%;
	}
</style>